<template>
  <el-dialog
    :title="dialogType == 0 ? '添加' : '修改'"
    :visible.sync="dialogVisible"
    width="45%"
    :before-close="handleClose"
  >
    <el-form
      :model="dialogForm"
      :rules="rules"
      ref="ruleForm"
      label-width="100px"
      class="demo-ruleForm"
    >
      <el-form-item label="患者姓名" prop="username">
        <el-input v-model="dialogForm.username"></el-input>
      </el-form-item>
      <el-form-item label="就诊卡号" prop="jiuzhen">
        <el-input v-model.number="dialogForm.jiuzhen"></el-input>
      </el-form-item>
      <el-form-item label="身份证号" prop="shenfenzheng">
        <el-input v-model.number="dialogForm.shenfenzheng"></el-input>
      </el-form-item>
      <el-form-item label="手机号" prop="iphone">
        <el-input v-model.number="dialogForm.iphone"></el-input>
      </el-form-item>
      <el-form-item label="挂号科室" prop="guahao">
        <el-input v-model="dialogForm.guahao"></el-input>
      </el-form-item>
      <el-form-item label="挂号类型" prop="type">
        <el-input v-model="dialogForm.type"></el-input>
      </el-form-item>
      <el-form-item label="挂号费" prop="money">
        <el-input v-model.number="dialogForm.money"></el-input>
      </el-form-item>
      <el-form-item label="挂号状态" prop="status">
        <el-input v-model="dialogForm.status"></el-input>
      </el-form-item>
      <el-form-item label="就诊日期" prop="date">
        <el-input v-model.number="dialogForm.date"></el-input>
      </el-form-item>
      <el-form-item label="就诊时间" prop="time">
        <el-input v-model.number="dialogForm.time"></el-input>
      </el-form-item>
      <el-form-item label="预约时间" prop="yuyuedate">
        <el-input v-model.number="dialogForm.yuyuedate"></el-input>
      </el-form-item>
    </el-form>

    <span slot="footer" class="dialog-footer">
      <el-button @click="closeDialog">取 消</el-button>
      <el-button type="primary" @click="submitForm('ruleForm')"
        >确 定</el-button
      >
    </span>
  </el-dialog>
</template>
<script>
import { addHomeApi ,updateApi} from "../../../api/home";
export default {
  props: ["dialogRow", "dialogType"],
  data() {
    return {
      dialogVisible: true,
      dialogForm: {
        id: "",
        username: "",
        jiuzhen: "",
        shenfenzheng: "",
        iphone: "",
        guahao: "",
        type: "",
        money: "",
        status: "",
        date: "",
        time: "",
        yuyuedate: "",
      },
      rules: {
        username: [
          { required: true, message: "请输入患者姓名", trigger: "blur" },
        ],
        jiuzhen: [
          { required: true, message: "请输入就诊卡号", trigger: "blur" },
        ],
        shenfenzheng: [
          { required: true, message: "请输入身份证号", trigger: "blur" },
        ],
        iphone: [{ required: true, message: "请输入手机号", trigger: "blur" }],
        guahao: [
          { required: true, message: "请输入挂号科室", trigger: "blur" },
        ],
        type: [{ required: true, message: "请输入挂号类型", trigger: "blur" }],
        money: [{ required: true, message: "请输入挂号费", trigger: "blur" }],
        status: [
          { required: true, message: "请输入挂号状态", trigger: "blur" },
        ],
        date: [{ required: true, message: "请输入就诊日期", trigger: "blur" }],
        time: [{ required: true, message: "请输入就诊时间", trigger: "blur" }],
        yuyuedate: [
          { required: true, message: '请输入"预约时间', trigger: "blur" },
        ],
      },
    };
  },
  mounted() {
    this.dialogForm = { ...this.dialogRow };
  },
  methods: {
    submitForm(formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          // alert('验证通过!');

          if (this.dialogType == 0) {
            addHomeApi(this.dialogForm).then((res) => {
              console.log("res", res);
              if (res.code == 200) {
                this.$emit("resetTable");
              }
            });
          } else if (this.dialogType == 1) {
            // alert('修改请求 ')
             updateApi(this.dialogForm).then(res=>{
               console.log(res)
                 if (res.code == 200) {
                this.$emit("resetTable");
              }
             })
          }
        } else {
          console.log("验证不通过!!");
          return false;
        }
      });
    },
    handleClose(done) {
      this.$confirm("确认关闭？")
        .then((_) => {
          done();
          this.$emit("closeDialog");
        })
        .catch((_) => {});
    },
    closeDialog() {
      this.$emit("closeDialog");
    },
  },
};
</script>

<style>
.tankuang {
  width: 600px;
  height: 400px;
  background: yellow;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}
</style>